<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <BlogCard v-for="blog in blogs" :blog="blog" :key="blog.id" />
  </div>
</template>

<script setup>
import BlogCard from "@/views/blog/BlogCard.vue"
import { onMounted, ref, onUnmounted } from "vue"
import { GetBlogsAll } from "@/apis/allAPI/blog"

const blogs = ref(null)

// 滚动位置清理函数
const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  // 如果用户滚动到顶部，清除保存的滚动位置
  if (scrollTop <= 10) {
    // 清除保存的滚动位置
    if (window.scrollPositions) {
      window.scrollPositions.delete("blogs")
    }
  }
}

onMounted(() => {
  GetBlogsAll("homepageBlogs", (rData) => {
    blogs.value = rData
  })

  // 添加滚动监听
  window.addEventListener("scroll", handleScroll, { passive: true })
})

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener("scroll", handleScroll, { passive: true })
})
</script>
